<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/login.css">
    <title>登录</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="nav-bar">            
            <nav class="nav-l">
                <!-- logo -->
                <div class="logo">
                    <a href="index.html" title="qq阅读"></a>
                </div>
            </nav>
            <nav class="nav-r">
                <a href="./index.html" class="index text-b">进入网站首页</a></li>
            </nav>            
        </div>
    </header>
    <!-- 登录内容 -->
    <div class="container login-m">
        <div class="login-box">
            <div class="tab-t">
                <a href="#" class="active">账户登录</a>
                <a href="#">二维码登录</a>
            </div>
            <div class="tab-b">
                <div class="input">
                    <span class="icon"><img src="./img/icon/yhm.ico" alt=""></span>
                    <input type="text" placeholder="请输入用户名称/邮箱" name="username" required>
                </div>
                <div class="input">
                    <span class="icon"><img src="./img/icon/mima.ico" alt=""></span>
                    <input type="password" placeholder="请输入密码" name="password" required>
                </div>
                <div class="tongyi">
                    <i class="queren"><img src="./img/icon/xz.ico" alt=""></i>
                    我已同意 <a href="javascript:;" class="text-b">《服务条款》</a> 和 <a href="javascript:;" class="text-b">《服务条款》</a>
                </div>
                <div class="button">
                    <button type="submit" class="dl">登录</button>
                    <div class="btn-b">
                        <a href="#">忘记密码？</a>
                        <a href="./register.html">免费注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


     <!-- 脚部模块 -->
     <footer style="margin-top: 100px;">
        <div class="footer-l">
            <img src="./img/logo.png" width="120px" alt="">
            <p class="copyright" data-v-c28a83fa="">
                Copyright (C) 2024 book.qq.com All Rights Reserved 上海阅文信息技术有限公司 版权所有
            </p>
            <a href="#" class="download">下载APP</a>
        </div>
        <div class="footer-r">
            <dl>
                <dt>关于QQ阅读</dt>
                <dd><a href="#">关于腾讯</a></dd>
                <dd><a href="#">About Tencent</a></dd>
                <dd><a href="#">服务协议</a></dd>
                <dd><a href="#">客户服务</a></dd>
                <dd><a href="#">帮助</a></dd>
            </dl>
            <dl>
                <dt>更多信息</dt>
                <dd><a href="#"> 开放平台</a></dd>
                <dd><a href="#">违规举报</a></dd>
                 <dd><a href="#">起点中文网</a></dd>
                <dd><a href="#">潇湘书院</a></dd>
                <dd><a href= "#">红袖添香</a></dd>
            </dl>
            <dl>
                <dt>登录/注册</dt>
                <dd><a href="login.html">登录</a></dd>
                <dd><a href="register.html">注册</a></dd>
            </dl>
            
        </div>
    </footer>

    <script>
        // 获取元素
        var userName = document.querySelector("[name=username]")
        var password = document.querySelector("[name=password]")
        // 获取登录按钮
        var dl = document.querySelector('.dl')

        // 如果注册页面有存到名字和密码自动填入注册页面
        var obj = JSON.parse(localStorage.getItem('obj'))
        if(obj) { //如果obj存在
            userName.value = obj.uname
            password.value = obj.pwd
        } else {
            alert("请先注册")
            location.href = "./register.html"
        }
        // 点击事件
        dl.addEventListener('click' ,function() {   
            if (userName.value === obj.uname && password.value === obj.pwd) {
                 // 跳转到首页
                location.replace('./index.html')
            } else {
                alert("请输入正确的用户名和密码")
            }     
           
        })
        
   </script>
</body>
</html>